import { Link } from 'umi';
import { Row, Col, Input, Space, Button } from 'antd';
import { GridContent, getMenuData } from '@ant-design/pro-layout';
import Nav from './components/Nav';
import Footer from './components/Footer';

import classnames from 'classnames';

import styles from './basicLayout.less';

const LogoBar = () => {
    const history: string[] = [
        'NDVI',
        '林业遥感',
        '植被光谱形成原因',
        '反演算法',
        '近红外遥感',
        '蓝藻',
        '深度神经网络',
        '遥感地球',
    ];
    return (
        <Row className={styles.logo} gutter={[0, 0]}>
            <Col span={7}>
                    <Link to={`/home`}> <img src={require('@public/images/logo@2x.png')} width={318} /></Link>
            </Col>
            <Col span={17} style={{ paddingLeft: 35 }}>
                <Space>
                    <Input className={styles.searchInput} placeholder="搜索文档" />
                    <Button type="primary" className={styles.searchBtn}>
                        搜索文档
                    </Button>
                </Space>
                <div className={styles.history}>
                    <p>近期搜索：</p>
                    {history.map((item: string, index: number) => (
                        <Button key={index} type="link" size="small">
                            {item}
                        </Button>
                    ))}
                </div>
            </Col>
        </Row>
    );
};

const Menu = (props: any) => {
    const {
        location,
        route = {
            routes: [],
        },
    }: any = props;
    const menus = getMenuData(route.routes ?? []);

    return (
        <div className={styles.menu}>
            <GridContent contentWidth="Fixed">
                {menus?.menuData
                    ?.filter((menu: any) => menu.name?.length > 0)
                    .map((menu: any, index: number) => {
                        return (
                            <span
                                className={classnames(styles.item, {
                                    [styles.active]: location.pathname.includes(menu.path),
                                })}
                                key={index}
                            >
                                <Link to={menu?.path}>{menu?.name}</Link>
                            </span>
                        );
                    })}
            </GridContent>
        </div>
    );
};

export default (props: any) => {
    const { children } = props;

    const childrens:any[] = children as any[];


    return (
        <div className={styles.wrapper}>
            <GridContent contentWidth="Fixed">
                <Nav/>
                <LogoBar />
            </GridContent>
            <Menu {...props} />
            <GridContent contentWidth="Fixed" style={{ marginTop: 20 }}>
                {
                    childrens
                }
            </GridContent>
            <Footer />
        </div>
    );
};
